<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加菜单</title>
    <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
    <link href="../../static/layuiadmin/style/admin.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="../../static/layuiadmin/config.js" charset="utf-8"></script>
    <script src="../../static/layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script src="../../static/layuiadmin/layui/vue.min.js" charset="utf-8"></script>
    <script src="../../static/layuiadmin/lib/index.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="addMenu.js" charset="utf-8"></script>
    <script src="menu.js" charset="utf-8"></script>
    <style scope>
        .layui-form-radio>i {
            margin-right: -10px;
            margin-top: -20px;
            font-size: 22px;
            color: #c2c2c2;
        }
    </style>
</head>
<body>
    <div id="addDiv" v-cloak>
        <form id="addForm" class="layui-form" action="" lay-filter="component-form-group">
            <div class="layui-form-item" style="margin-top: 30px">
                <label class="layui-form-label">类型<i style="color: red">*</i></label>
                <div class="layui-input-block" >
                    <label style="margin-right: 30px;margin-top: 10px" >
                        <input type="radio" name="type" value="0" v-model="menu"/> 目录
                    </label>
                    <label style="margin-right: 30px;margin-top: 10px" >
                        <input type="radio" name="type" value="1" v-model="menu" checked /> 菜单
                    </label>
                    <label style="margin-right: 30px;margin-top: 10px">
                        <input type="radio" name="type" value="2" v-model="menu"/> 按钮
                    </label>
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">上级菜单<i style="color: red">*</i></label>
                <div class="layui-input-block">
                    <input type="text" name="menuPid" class="layui-input" id="menuPid" style="display: none"/>
                    <input type="text" class="layui-input" id="name" style="cursor:pointer;" name="parentName" lay-verify="parentName" onclick="load_menuTree()" placeholder="一级菜单"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称<i style="color: red">*</i></label>
                <div class="layui-input-block">
                    <input type="text" name="menuName" autocomplete="off" placeholder="菜单名称或按钮名称" lay-verify="menuName" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" v-if="menu == '1'">
                <label class="layui-form-label">菜单Path<i style="color: red">*</i></label>
                <div class="layui-input-block">
                    <input type="text" name="path" autocomplete="off" placeholder="菜单Path" lay-verify="path" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" v-if="menu != '2'">
                <label class="layui-form-label">菜单图标<i style="color: red">*</i></label>
                <div class="layui-input-block">
                    <input type="text" name="icon" autocomplete="off" placeholder="图标"  lay-verify="icon" class="layui-input">
                    <code style="margin-top:4px;display: block;">获取图标：http://www.fontawesome.com.cn/faicons/</code>
                </div>
            </div>


            <div class="layui-form-item" v-if="menu != '0'">
                <label class="layui-form-label">授权标识</label>
                <div class="layui-input-block">
                    <input type="text" name="perms" autocomplete="off" placeholder="多个用逗号隔开，如：user:list,user:create" class="layui-input">
                </div>
            </div>

            <div class="layui-input-block">
                <div class="layui-footer" style="margin-left: 240px;margin-top: 50px">
                    <button class="layui-btn" type="submit" lay-submit=""  lay-filter="addMenu">确 定</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
                </div>
            </div>

        </form>
    </div>
    <script>
        var vm = new Vue({
            el: '#addDiv',
            data: {
                menu:''
            }
        });
    </script>
</body>
</html>